<!--
 * @Author: 噜噜雯雯 2199987619@qq.com
 * @Date: 2025-05-30 15:00:30
 * @LastEditors: 噜噜雯雯 2199987619@qq.com
 * @LastEditTime: 2025-09-28 10:58:49
 * @FilePath: \linePatrol\vue-element-plus-admin\src\views\Authorization\Dictionary\components\EditDictType.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import { set } from 'lodash-es'
import { computed, PropType, reactive, ref } from 'vue'
import { Echart } from '@/components/Echart'
import { EChartsOption } from 'echarts'
import { lineOptions } from './echarts-data'
import { ElDivider, ElSelect, ElOption } from 'element-plus'
import SCADAApi from '@/api/scada'
import dayjs from 'dayjs'
const props = defineProps({
  currentRow: {
    type: Object as PropType<any>,
    default: () => null
  }
})
const lineOptionsData = reactive<EChartsOption>(lineOptions) as EChartsOption
const getMonthlySales = async (groupedData: any) => {
  const series = computed(() => {
    return Object.entries(groupedData).map(([date, data]: [any, any]) => ({
      name: date,
      type: 'line',
      smooth: true,
      data: data.map((item: any) => [item.time, item.value])
    }))
  })
  function computedXAxisData() {
    const allTimes = new Set()
    Object.values(groupedData).forEach((data: any) => {
      data.forEach((item) => allTimes.add(item.time))
    })
    return Array.from(allTimes).sort()
  }
  set(lineOptionsData, 'xAxis.data', computedXAxisData())
  set(lineOptionsData, 'series', series)
  set(lineOptionsData, 'legend.data', Object.keys(groupedData))
}
const options = computed(() => {
  let res = props.currentRow.flat()
  res = res.map((item: any) => {
    item['onlyKey'] = item.deviceNo + item.devNo + item.affectField
    return item
  })
  return res
})
const value = ref(options.value[0].onlyKey)
const getAllApi = async (deviceNo: string, devNo: string, aFfectField: number, devType: number) => {
  let res = await SCADAApi.GetAttributeListData({
    deviceNo: deviceNo,
    devNo: devNo,
    aFfectField: aFfectField,
    devType: devType,
    interval: 1
  })
  const groups = {}
  res = res.map((item) => {
    item['datetime'] = dayjs(item.time).valueOf()
    const date = dayjs(item.time).format('YYYY-MM-DD')
    if (!groups[date]) groups[date] = []
    item.value = Number(item.value)
    groups[date].push({
      // 提取时分秒作为X轴
      time: dayjs(item.time).format('HH:mm:00'),
      // 转为数值类型
      value: Number(item.value)
    })
    return item
  })
  await Promise.all([getMonthlySales(groups)])
}
getAllApi(
  options.value[0].deviceNo,
  options.value[0].devNo,
  options.value[0].aFfectField,
  options.value[0].devType
)
// getAllApi(
//   "13723960875",
//   "D0",
//   options.value[0].affectField,
//   0
// );

const selectChange = async (key: number) => {
  const selectedOption = options.value.find((item: any) => item.onlyKey === key)
  getAllApi(
    selectedOption.deviceNo,
    selectedOption.devNo,
    selectedOption.aFfectField,
    selectedOption.devType
  )
}
</script>

<template>
  <div style="display: flex; justify-content: space-between; height: 500px">
    <div class="w-[49.5%] bg-white p-[10px] overflow-y-scroll">
      <ContentWrap title="实时数据" message="实时数据">
        <div v-for="(res,index) in currentRow" :key="index">
          <i v-for="item in res" :key="item.value">
            <span>{{ item.name }}</span
            >&ensp;<span>{{ item.value }}</span>
          </i>
          <ElDivider />
        </div>
      </ContentWrap>
    </div>
    <div class="w-[49.5%] bg-white p-[10px]">
      <ContentWrap title="数据曲线" message="三天数据变化">
        <p>
          <span>量测选择：</span
          ><ElSelect
            v-model="value"
            @change="selectChange"
            placeholder="Select"
            style="width: 240px"
          >
            <ElOption
              v-for="item in options"
              :key="item.onlyKey"
              :label="item.name"
              :value="item.onlyKey"
            />
          </ElSelect>
        </p>
        <Echart :options="lineOptionsData" :height="300" />
      </ContentWrap>
    </div>
  </div>
</template>
<style scoped lang="less">
/* ::v-deep是vue3提供的深度选择器，.el-form-item__label是element-plus官方定义的类 */
:deep(.el-dialog__body) {
  background: rgb(204, 204, 204);
  padding: 10px;
}
i {
  font-style: normal;
  display: inline-block;
  padding: 10px;
  background: #c6e2ff69;
  margin: 10px;
  border-radius: 7px;
  font-size: 13px;
}
p {
  display: flex;
  align-items: center;
  margin-bottom: 5%;
}
:deep(.el-divider--horizontal) {
  margin: 14px 0;
}
</style>
